<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li><a href="save.html">存储数据库</a></li>
      <li><a href="compareFeature.html">特征码比对</a></li>
      <li><a href="searchFaces.html">数据库查找</a></li>
      <li class="active"><a href="imgList.html">数据库图像预览</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="panel panel-primary">
      <div class="tips">
        <p>调用的接口：loadImagesByWhere(where, startRow, numRows)</p>
        <p>接口参数：where（WHERE条件语句 可为null），startRow（从第几行开始查找，可根据需要自行设置）、numRows（每页展示的行数，可根据需要自行设置）</p>
        <p>举例：client.loadImagesByWhere(null, 1, 10, function (imageArr) {})</p>
      </div>
      <div class="panel-heading">数据库中图像预览</div>
      <div class="panel-body">
        <div class="total">
          <button type="button" class="btn btn-primary showBtn">批量处理</button>
          <div class="hideDiv none">
            <button type="button" class="btn btn-primary checkAll">全选</button>
            <button type="button" class="btn btn-default quxiao">取消</button>
            <button type="button" class="btn btn-warning delAll">删除</button>  
          </div>
        </div>
        <div class="noresult none">
          <img src="../style/images/icon4.png" style="height:168px;" />
          <p>暂时没有数据</p>
        </div>
        <ul id="imgList" class="clearfix"></ul>
        <div class="pagination">
          <!-- 上一页 -->
          <div class="prveBtn">&laquo;</div>
          <!-- 分页内容 -->
          <ul class="clearfix pageDiv left"></ul>
          <!-- 下一页 -->
          <div class="nextBtn">&raquo;</div>
          <div class="shuru">
            共<span class="pageNum" style="color: #337ab7;"></span>页
            前往 <input type="text" class="form-control" style="width: 80px;">页
            <button type="button" class="btn btn-primary goPage">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 显示大图 -->
    <div class="bigImg">
    </div>

    <!-- 返回顶部 -->
    <div class="goTop"></div>

    <!-- 提示语 -->
    <div class="box">
      <div class="msg">提示成功</div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="../style/js/bootstrap.min.js"></script>
  <script src="config/thrift.js"></script>
  <script src="config/FaceDb.js"></script>
  <script src="config/FaceDb_types.js"></script>
  <script src="config/common.js"></script>
  <script>
    //当前页面为1
    var pageNow = 1;
    // 调用 查询出数据库所有的image记录
    loadImages(1);


    // 计算分页数目
    try {
      // 获取数据库image表所有的记录数目
      var pageTotal = client.getImageCount(null);
      // 当记录为0时
      if(pageTotal == 0){
        $('.noresult').show();
        $('#imgList').hide();
      }else{
        $('.noresult').hide();
        $('#imgList').show();
      }
      
      // 每页10条数目，计算分页数目
      var pageNum = Math.ceil(Number(pageTotal)/Number(10));
      $('.pageNum').text(pageNum);

      // 添加分页按钮内容
      for(var i=1; i< pageNum+1; i++){
        var html = '<li class="pageBtn">'+ i +'</li>';
        $('.pageDiv').append(html);
      }

      // 添加默认第一页样式
      $('.pageDiv').children('li').eq(0).addClass('active');

      // 隐藏上一页按钮
      $('.prveBtn').hide();

      // 隐藏过多的页码，默认显示10条页码
      $('.pageDiv').children('li:gt(9)').hide();

      // 如果只有一页的内容，隐藏下一页按钮
      if(pageNum == 1){
        $('.nextBtn').hide();
      }
    } catch (error) {
      console.log(error);
    }


    // 点击页码跳转
    $('.pageDiv').on('click','.pageBtn',function() {
      // 计算开始行数(当前的页数减1，再去乘每页行数，最后加1)
      pageNow = Number($(this).text());
      var startRow = (pageNow - Number(1))*Number(10)+Number(1);

      // 调用显示10个页码
      pageTen(pageNow);

      // 调用 是否显示上一页/下一页按钮
      tagBtn(pageNow);

      // 给对应页码添加样式
      $(this).addClass('active').siblings().removeClass('active');

      // 清空输入表单的值
      $('.shuru input').val('')

      // 调用
      loadImages(startRow);
    })


    // 点击上一页跳转
    $('.prveBtn').click(function(){
      // pageNow 是当前所在的页数
      pageNow = Number($('.pageDiv').children('.active').text());
      if(pageNow <= 1){
        $(this).hide();
      }else{
        pageNow = pageNow - 1;
        var startRow = (pageNow - Number(1)) * Number(10) + Number(1);

        // 调用加载数据
        loadImages(startRow);

        // 调用显示10个页码
        pageTen(pageNow);

        // 调用 是否显示上一页/下一页按钮
        tagBtn(pageNow);

        // 给页码加样式
        $('.pageDiv').children('li').eq(pageNow - 1).addClass('active').siblings().removeClass('active');
      }
    })


    // 点击下一页跳转
    $('.nextBtn').click(function () {
      // pageNow 是当前所在的页数
      pageNow = Number($('.pageDiv').children('.active').text());
      if(pageNow+1 > pageNum){
        $(this).hide();
      }else{
        // 当前的页码+1
        pageNow = pageNow + 1;
        var startRow = (pageNow - Number(1)) * Number(10) + Number(1);

        // 调用加载数据
        loadImages(startRow);

        // 调用显示10个页码
        pageTen(pageNow);

        // 调用 是否显示上一页/下一页按钮
        tagBtn(pageNow);

        // 给页码加样式
        $('.pageDiv').children('li').eq(pageNow - 1).addClass('active').siblings().removeClass('active');
      }
    })

    
    // 手动输入，前往第几页
    $('.goPage').click(function () {
      var value = $(this).siblings('input').val();
      var valueNum = Number(value);
      var reg = /^[0-9]*[1-9][0-9]*$/;
      // 判断输入的是正整数
      if(reg.test($.trim(value))){
        // 判断输入的值，小于或等于分页总数目
        if(valueNum <= pageNum){
          // 获取开始的行数
          var startRow = (valueNum - Number(1)) * Number(10) + Number(1);
          
          //给对应页码添加样式
          $('.pageDiv').children('li').eq(valueNum - 1).addClass('active').siblings().removeClass('active');

          // 调用显示10个页码
          pageTen(valueNum);

          // 调用 是否显示上一页/下一页按钮
          tagBtn(valueNum);

          // 调用加载数据
          loadImages(startRow);
        }else{
          $(this).siblings('input').val('')
          $(this).siblings('input').focus();
          // 提示语
          $('.box').show().delay(2000).fadeOut();
          $('.box').find('.msg').text('该页码没有数据！');
        }
      }else{
        $(this).siblings('input').val('')
        $(this).siblings('input').focus();
        // 提示语
        $('.box').show().delay(2000).fadeOut();
        $('.box').find('.msg').text('请输入正确格式的内容！');
      }
    })


    // 定义 页码只显示10个 函数
    function pageTen(num) { 
      // 显示前后的页码
      if (num > 5) {
        var lessNum = num - 6;
        var greaterNum = num + 3;
        if (lessNum < pageNum) {
          $('.pageDiv').children('li').hide();
          $('.pageDiv').children('li:gt(' + lessNum + ')').show();
          $('.pageDiv').children('li:gt(' + greaterNum + ')').hide();
        }
      } else {
        $('.pageDiv').children('li').show();
        $('.pageDiv').children('li:gt(9)').hide();
      }
    }


    // 定义 是否显示上一页/下一页按钮 函数
    function tagBtn(number) {
      // 当前页面为第一页时，上一页按钮隐藏
      if (number > 1) {
        $('.prveBtn').show();
      } else {
        $('.prveBtn').hide();
      }

      // 当前页面为最后一页时，下一页按钮隐藏
      if (number >= pageNum) {
        $('.nextBtn').hide();
      } else {
        $('.nextBtn').show();
      }
    }

    // 定义 查询出数据库所有的image记录
    function loadImages(startRow) {
      // 清空已有的照片数据
      $('#imgList li:not(.listLoad)').remove();
      $('#imgList').append('<li class="listLoad"></li>')

      //参数：where, startRow, numRows
      client.loadImagesByWhere(null, startRow, 10, function (imageArr) {
        for (var i = 0; i < imageArr.length; i++) {
          // 通过md5查询图像数据
          var image = client.getImageRef(imageArr[i].md5, 'IMAGE');
          // 通过md5查询照片二进制
          var imageStr = client.getImageBytes(imageArr[i].md5);
          // 将二进制数据流转为base64
          var imageBase = btoa(imageStr);
          var img = 'data:image/' + image.format + ';base64,' + imageBase;

          var html = '<li>' +
            '<img src="' + img + '" alt="' + imageArr[i].md5 + '" data-width="' + image.width + '" data-height="' + image.height + '" class="lookBig"/>' +
            '<div class="checkBtn"></div>' +
            '<button class="btn btn-warning btn-sm delBtn">删除</button>' +
            '</li>';

          $('#imgList').find('.listLoad').remove();
          $('#imgList').append(html);
        }
      }).fail(function (error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseText);
      });
    }

    
    // 点击，放大查看图片
    $('#imgList').on('click','.lookBig',function() {
      $('.bigImg img').remove();
      var intrWid = $(this).attr('data-width');
      var intrHei = $(this).attr('data-height');
      var src = $(this).attr('src');
      
      var clientHeight = document.documentElement.clientHeight; // 定义屏幕可视区高度
      var clientWidth = document.documentElement.clientWidth; // 定义屏幕可视区宽度

      if(intrHei> clientHeight){
        var bigHtml = '<img src="' + src + '" style="height: ' + clientHeight*0.8 + 'px;"/>'
      }else if(intrWid > clientWidth){
        var bigHtml = '<img src="' + src + '" style="width: ' + clientWidth * 0.8 + 'px;"/>'
      }else{
        var bigHtml = '<img src="' + src + '" style="width: ' + intrWid + 'px; height:'+ intrHei+'px"/>'
      }
      $('.bigImg').show().append(bigHtml);
    })


    // 删除单张照片按钮
    $('#imgList').on('click','.delBtn',function() {
      imgMd5Arr = [];
      var status = confirm('确定要删除该照片吗？');
      if (status == true) {
        var md5 = $(this).siblings('img').attr('alt');
        imgMd5Arr.push(md5);
        try {
          // 根据照片md5查找
          var featrue = client.getFeaturesByImageMd5(md5);

          getFeature(imgMd5Arr);
          
          // 删除feature表
          var feaRes = client.deleteFeatures(featureArr, false);
          // 删除face表和image表
          var result = client.deleteImage(md5, false);
          if (result && feaRes) {
            $(this).parent('li').remove();
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text('删除成功!');
          }
        } catch (error) {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text(error);
        }
      }else return;
    })


    // 点击批量操作按钮
    $('.showBtn').click(function() {
      $(this).hide().siblings('div').show();
      $('.checkBtn').show();
    })


    // 全选
    imgMd5Arr = [];  //定义选中的照片的md5
    featureArr = []
    $('.checkAll').click(function() {
      var imgList = $(this).parents('.total').siblings('#imgList');
      // 清空选中的照片
      imgMd5Arr = [];
      // 遍历选中的照片，赋值给组
      imgList.find('.checkBtn').addClass('checked');

      var img = imgList.find('img');
      for(var i=0; i<img.length; i++){
        imgMd5Arr.push(img[i].alt);
      }

      // 调用获取feature函数
      getFeature(imgMd5Arr);
    })


    // 获取feature
    function getFeature(imgMd5Arr) {
      // 清空，再赋值
      featureArr = [];
      imgMd5Arr.forEach(imageMd5 =>{
        try {
          var features = client.getFeaturesByImageMd5(imageMd5);
          features.forEach(element => {
            featureArr.push(element.md5)
          });
        } catch (error) {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text(error);
        }
      })
    }


    // 多选删除按钮
    $('.delAll').click(function () {
      if(imgMd5Arr.length){
        var status = confirm('确定要删除选中的照片吗？');
        if (status == true) {
          try {
            // 删除face表和image表
            var result = client.deleteImages(imgMd5Arr, false);
            var feaRes = client.deleteFeatures(featureArr, false);
            if (result) {
              $('.box').show().delay(3000).fadeOut();
              $('.box').find('.msg').text('删除成功!');
              window.location.reload();
            }
          } catch (error) {
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text(error);
          }
        } else return;
      }else{
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text('请选中要删除的照片！');
      }
    })


    // 取消按钮
    $('.quxiao').click(function () {
      $(this).parent('div').hide().siblings().show();
      $('.checkBtn').removeClass('checked').hide();
      imgMd5Arr = [];
    })


    // 选中事件
    $('#imgList').on('click','.checkBtn',function() {
      var imageMd5 = $(this).siblings('img').attr('alt');
      $(this).toggleClass('checked');
      if($(this).hasClass('checked')){
        imgMd5Arr.push(imageMd5);
      }else{
        imgMd5Arr.shift(imageMd5);
      }

      
      // 调用获取feature函数
      getFeature(imgMd5Arr);
    })


    // 点击关闭弹窗
    $('.bigImg').click(function() {
      $(this).children().remove();
      $(this).hide();
    })


    // 返回顶部
    $(window).scroll(function (event) {
      var winST = $(window).scrollTop();
      $('.goTop').fadeIn(400);
      if (winST == 0) {
        $('.goTop').fadeOut(400);
      }
    });
    $('.goTop').click(function (event) {
      $('html,body').stop().animate({ scrollTop: 0 }, 800);
    });
  </script>
</body>